<template>
  <el-dialog :append-to-body="true" :visible.sync="visible" v-dialogDrag :title="title" :close-on-click-modal="false" class="tl-dialog page" width="1000px" @open="open" @close="close">
    <el-form class="tl-form stakeholderForm" ref="form" :model="model" :rules="rules" label-width="120px" :disabled="disableEditSubmit">
      <el-row>
        <el-col :span="12">
          <el-form-item label="类别" prop="stakeholdercategory" :rules="rules.validateRequire">
            <el-select v-model="model.stakeholdercategory" :disabled="disabledUser" :placeholder="selectPlaceholder" filterable @change="clearAllInfo">
              <el-option v-for="item in codeModel.stakeholdercategoryList" :key="item.code" :label="item.name" :value="item.code" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="相关方姓名" prop="username" :rules="rules.validateSpace">
            <tl-ref-user v-if="isInside" v-model="model.usercode" :disabled="disabledUser" @confirm="addConfirm" :initDisplayData.sync="model.username" dataType="code" :singleSelect="true"> </tl-ref-user>
            <el-input v-else v-model="model.username"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="公司/部门" prop="orgdeptarray" :rules="rules.validateSpaceRequire">
            <el-input v-model="model.orgdeptarray" :disabled="disabledDept" placeholder="如：鼎信通讯股份有限公司\研发本部"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="职位" prop="position" :rules="rules.validateSpaceRequire">
            <el-input v-model="model.position" :disabled="disabledPosttion"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="工作组名称" prop="message">
            <el-input v-model="model.message" :disabled="disabledUser" placeholder="如：运维组"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="组内角色" prop="grouprole">
            <el-input v-model="model.grouprole" :disabled="disabledUser" placeholder="如：维护人员"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="联系电话" prop="phonenumber" :rules="rules.phonenumber">
            <el-input v-model="model.phonenumber"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="邮箱" prop="email" :rules="rules.email">
            <el-input v-model="model.email"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="备注" prop="description">
            <el-input v-model="model.description" type="textarea" :autosize="inputAutoSize" maxlength="1000" show-word-limit></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button :type="disableEditSubmit === false ? 'text' : 'primary'" @click="doCancelEdit">取消</el-button>
      <el-button type="primary" @click="doSubmitEdit" :loading="saveLoading" v-if="disableEditSubmit === false">确认</el-button>
    </div>
  </el-dialog>
</template>

<script>
/** mixins */
import { mixin_edit } from '@tapui/mixins/mixin_edit'
/** 子组件 */
/** 工具类 */
import { validateNull } from '@tapui/utils/validate'
import { putAction, getAction, postAction, deleteAction } from '@tapui/utils/http'
/** VUE配置 */
export default {
  mixins: [mixin_edit],
  components: {},
  data() {
    return {
      moduleTitle: '项目相关方',
      urlPrefix: '/sd/projectStakeholder/',
      url: {
        // 额外的url
      },
      // 额外验证规则
      addRules: {
        // 空格、电话、邮箱效验
        validateSpaceRequire: [{ required: 'true', message: '请输入内容', trigger: 'change' }, { whitespace: true, message: '只存在空格', trigger: 'blur' }],
        validateSpace: [{ whitespace: true, message: '只存在空格', trigger: 'blur' }],
        phonenumber: [{ pattern: /^1[3|4|5|7|8|9][0-9]{9}$/, message: '电话号码格式不正确', trigger: 'change' }],
        email: [{ type: 'email', message: '请输入正确的邮箱格式', trigger: 'change' }]
      },
      // 表示人员选择后是否有自动填写的职位信息
      isHaveposition: false
    }
  },
  // 传入projectinfo
  props: {
    projectinfo: {
      type: Object,
      default: () => {}
    }
  },
  computed: {
    /** 切换内、外部人员表单项 */
    isInside() {
      return this.model.stakeholdercategory === '1'
    },
    /** 改变placeholder显示 */
    selectPlaceholder() {
      return this.disableEditSubmit ? '' : '请选择'
    },
    // 控制公司修改权限
    disabledDept() {
      return !validateNull(this.model.usercode) && !validateNull(this.model.orgdeptarray) && this.isAdd
    },
    // 控制导入人员的修改权限
    disabledUser() {
      return !validateNull(this.model.usercode) && !validateNull(this.model.messagecode) && !this.isAdd
    },
    // 控制职位修改权限
    disabledPosttion() {
      return !validateNull(this.model.usercode) && this.isHaveposition && this.isAdd
    },
    // 文本域自适应高度
    inputAutoSize() {
      return this.disableEditSubmit ? {} : { minRows: 3 }
    }
  },
  methods: {
    loaded() {
      // 页面加载完毕执行
    },
    /** 初始化数据 */
    assignDefaultValue() {
      if (this.isAdd) {
        this.$set(this.model, 'projectid', this.projectinfo.id)
        this.$set(this.model, 'projectcode', this.projectinfo.projectcode)
        this.$set(this.model, 'projectname', this.projectinfo.projectname)
        this.$set(this.model, 'projectlevel', this.projectinfo.projectlevel)
        this.$set(this.model, 'projectmanagername', this.projectinfo.projectmanager)
        this.$set(this.model, 'projectmanagercode', this.projectinfo.projectmanagercode)
      }
    },
    /** 内部人员自动填写信息 */
    addConfirm([{ dispdeptid, title, mobile, email }]) {
      if (validateNull(title)) {
        // 表示职位为空，没有自动填写
        this.$set(this.model, 'position', '\\')
        this.isHaveposition = false
      } else {
        this.$set(this.model, 'position', title)
        this.isHaveposition = true
      }
      validateNull(dispdeptid) ? this.$set(this.model, 'orgdeptarray', '\\') : this.$set(this.model, 'orgdeptarray', dispdeptid)
      validateNull(mobile) ? this.$set(this.model, 'phonenumber', '') : this.$set(this.model, 'phonenumber', mobile)
      validateNull(email) ? this.$set(this.model, 'email', '') : this.$set(this.model, 'email', email)
    },
    /** 提交前执行 */
    beforeSubmit() {
      // 非内部人员去除工号,内部人员判断是否合法
      if (!this.isInside) {
        this.model.usercode = ''
      } else {
        let isTeamMember = this.model.message === '项目核心组' || this.model.message === '项目领导组' || this.model.message === '决策组'
        if (!this.model.usercode) {
          this.$tap.alert('请通过选择组件指定内部人员！')
          return false
        } else if (this.model.stakeholdercategory === '1' && isTeamMember && this.isAdd) {
          this.$tap.alert('请通过任命、变更等方式添加项目组成员，在审核通过后会自动导入！')
          return false
        }
      }
      for (let i = 0; i < this.$parent.datas.length; i++) {
        if (this.isInside &&
            this.$parent.datas[i].message === this.model.message &&
            this.$parent.datas[i].usercode === this.model.usercode && this.model.id !== this.$parent.datas[i].id) {
              this.$tap.alert('相关方已存在！')
              return false
        }
        if (!this.isInside &&
            this.$parent.datas[i].orgdeptarray === this.model.orgdeptarray &&
            this.$parent.datas[i].position === this.model.position &&
            this.model.id !== this.$parent.datas[i].id) {
              this.$tap.alert('相关方已存在！')
              return false
        }
      }
      return true
    },
    // 内部、外部类别切换时清空出类别外所有用户填写的值
    clearAllInfo() {
        this.$set(this.model, 'usercode', null)
        this.$set(this.model, 'username', null)
        this.$set(this.model, 'orgdeptarray', null)
        this.$set(this.model, 'position', null)
        this.$set(this.model, 'message', null)
        this.$set(this.model, 'grouprole', null)
        this.$set(this.model, 'phonenumber', null)
        this.$set(this.model, 'email', null)
        this.$set(this.model, 'stakeholderimpact', null)
        this.$set(this.model, 'managementstrategy', null)
        this.$set(this.model, 'description', null)
    }
  }
}
</script>

<style scoped lang="scss">
.stakeholderForm {
  margin-top: 15px;
  margin-left: -50px;
  .el-row {
    margin-bottom: 2px;
  }
  /* 隐藏禁用状态下的提示 */
  .is-disabled ::placeholder {
    color: transparent !important;
  }
}
.tl-ref-user {
  /deep/ .tl-ref-selector {
    .el-button {
      background-color: red !important;
    }
  }
}
</style>
